<template>
	<view class="order">
		<view class="header_btn">
			<button @tap="skip('/pages/newOrder/index')">新建订单</button>
			<button @tap="skip('/pages/order/getOrder')">取单</button>
			<!-- </navigator> -->
			<button @tap="open">筛选</button>
		</view>
		<view v-if="orderListCopy.length>0" class="order_list">
			<view v-for="(item, index) in orderListCopy" @tap="
          skip(
            `/pages/order/order_details?orderIdSale=${item.orderIdSale}&type=0&cid=${item.cid}`
          )
        " class="order_list_item">
				<view class="order_list_item_left">
					<view class="order_list_item_left_top">
						<text class="order_list_item_left_top_l">{{ item.cname }}</text><text
							class="order_list_item_left_top_r">{{ item.orderDay }}</text>
					</view>
					<view class="order_list_item_left_buttom">
						<text>金额:{{ item.orderAmt - item.returnAmt | unifyNumber}}</text>
						<text>出货量:{{ item.orderNum }}</text>
						<text>退货量:{{ item.returnNum }}</text>
					</view>
				</view>
				<view class="order_list_item_right">
					<image class="zuofei" v-if="item.stt=='2'" mode="aspectFit"
						:src="resBaseUrl + '/index/zuofeiicon.png'" alt="" />
					<image mode="aspectFit" :src="resBaseUrl + 'user/right.png'" alt="" />
				</view>
				<view @click.stop="shareWeixin(item.orderUrl)"
					style="position: absolute;right: 10rpx;bottom: 10rpx;padding: 10rpx;background-color: red;color: #fff;border-radius: 20rpx;">
					微信分享</view>
				<image v-if="item.priceStt == '1' && item.stt!='2'"
					style="position: absolute;width: 60rpx; right: 50rpx;bottom: 10rpx;" mode="widthFix"
					:src="resBaseUrl + 'gantanhao.png'"></image>
			</view>
		</view>
		<view v-else>
			<u-divider textSize="34" text="暂无数据"></u-divider>
		</view>
		<u-popup :overlayStyle={zIndex:997} :zIndex="998" :show="show" mode="bottom" :round="20" @close="close"
			@open="open">
			<view class="toast">
				<view class="form">
					<view class="select">
						<view class="text"> <text>*</text>客户: </view>
						<view style="display: flex;align-items: center;" class="">
							<input v-model="user" type="text" placeholder="请输入客户名称" />
							<view @tap="open1" class="seacchBtn">
								选择
							</view>
						</view>
					</view>
					<view class="select">
						<view class="text"> <text>*</text>订单日期: </view>
						<view class="date">
							<!-- <picker mode="date" :value="query.beginTime"
								@change="(e) => bindDateChange(e, 'beginTime')"> -->
							<view @tap="openDatePick('beginTime')" class="select-input">
								<view class="select-input-left">
									<text v-if="query.beginTime">{{ query.beginTime.split(" ")[0] }}</text>
									<text v-else>请选择</text>
								</view>
								<u-icon name="arrow-down" color="#272727" size="24rpx"></u-icon>
							</view>
							<!-- </picker> -->
							<view class="date-text">到</view>
							<!-- <picker mode="date" :value="query.endTime" @change="(e) => bindDateChange(e, 'endTime')"> -->
							<view @tap="openDatePick('endTime')" class="select-input">
								<view class="select-input-left">
									<text v-if="query.endTime">{{ query.endTime.split(" ")[0] }}</text>
									<text v-else>请选择</text>
								</view>
								<u-icon name="arrow-down" color="#272727" size="24rpx"></u-icon>
							</view>
							<!-- </picker> -->
						</view>
					</view>
					<!-- 	<view class="select">
						<view class="text"> <text>*</text>退货量: </view>
						<input v-model="returnNum" type="text" placeholder="请输入数量" />
					</view>
					<view class="select">
						<view class="text"> <text>*</text>总金额: </view>
						<input v-model="totalPrice" type="text" placeholder="请输入金额" />
					</view> -->
				</view>
				<view class="btn">
					<button @tap="search">查询</button>
					<button @tap="reset">清空查询数据</button>
				</view>
			</view>
		</u-popup>
		<Customer ref="child" @saveUser="saveUser" />
		<myDatePick @bindDateChange="bindDateChange" mode="date" ref="myDatePick" :show.sync="showDate" />
	</view>
</template>

<script>
	import myDatePick from "../../components/myDatePick.vue";
	import Customer from "../../components/CustomerScreening.vue"
	export default {
		components: {
			myDatePick,
			Customer
		},
		onShareAppMessage(res) {
			return {
				title: "",
				path: "",
				imageUrl: "",
			}
		},
		data() {
			const _this = this
			return {
				resBaseUrl: _this.resBaseUrl,
				query: {
					beginTime: "",
					endTime: "",
					// sid: null // 供应商id
				},
				show: false,
				orderList: [],
				orderListCopy: [],
				user: "",
				time: [],
				returnNum: "",
				totalPrice: "",
				pageSize: 10,
				pageNo: 1,
				showDate: false,
				dateKey: ''
			};
		},
		methods: {
			shareWeixin(url) {
				// #ifdef APP-PLUS
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: url,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
				// #ifdef MP-WEIXIN
				url = url.replace("http:","https:")
				wx.downloadFile({
					url,
					success: (res) => {
						console.log("res:", res)
						wx.showShareImageMenu({
							path: res.tempFilePath
						})
					},
					fail: (res) => {
						console.log(res)
						if (res.errMsg.indexOf('deny') != -1 || res.errMsg.indexOf('denied') != -1) {
							wx.showToast({
								title: '保存相册失败，请设置权限！',
								icon: 'none',
								duration: 2000,
							})
						} else {
							wx.showToast({
								title: '保存相册失败，请重试！',
								icon: 'none',
								duration: 2000,
							});
						}
					}
				})

				// #endif

			},
			saveUser(data) {
				this.user = data.cname;
				this.cid = data.cid;
				// this.accounts()
				this.$refs.child.close();
			},
			openDatePick(key) {
				this.showDate = true
				this.dateKey = key
			},
			bindDateChange(e) {
				console.log(e)
				let value = e.slice(0, 10)
				let key = this.dateKey
				this[key] = value;
				if (key === "endTime") {
					value = `${value} 23:59:59`;
				} else if (key === "beginTime") {
					value = `${value} 00:00:00`;
				}
				this.query[key] = value;
				if (this.query.endTime && this.query.beginTime) {}
			},
			open() {
				this.show = true;
			},
			open1() {
				this.$refs.child.open();
			},
			close() {
				this.show = false;
			},
			search() {
				// let timeList = this.orderList.map((item) => item.orderDay);
				// console.log(Date.parse(timeList[6]));
				if (
					this.user != "" || this.query.beginTime !== '' || this.query.endTime !== ''

				) {
					this.getList({
						pageSize: this.pageSize,
						pageNo: 1,
						cname: this.user,
						endTime: this.query.endTime,
						beginTime: this.query.beginTime,
						rturnNum: this.returnNum,
						orderAmt: this.totalPrice,
					});
				} else {
					this.getList({
						pageSize: 10,
						pageNo: 1
					});

				}
				this.show = false;
			},
			reset() {
				// this.show = false
				this.user = "",
					this.query = {
						beginTime: "",
						endTime: "",
					},
					(this.returnNum = ""),
					(this.totalPrice = "");
			},
			getList(query) {
				this.$api.orderListApi({
					data: query
				}).then((res) => {
					if (res.code == 200) {
						this.orderList = [...res.result.list];
						this.orderListCopy = this.orderList;
						// console.log(this.orderListCopy);
					}
				});
			},
		},
		onReachBottom() {
			if (this.orderList.length == this.pageSize * this.pageNo) {
				this.pageNo++;
				this.$api.orderListApi({
					data: {
						pageSize: this.pageSize,
						pageNo: this.pageNo,
						cname: this.user,
						endTime: this.query.endTime,
						beginTime: this.query.beginTime,
						returnNum: this.returnNum,
						orderAmt: this.totalPrice
					}
				}).then((res) => {
					if (res.code == 200) {
						this.orderList = [...this.orderList, ...res.result.list];
						this.orderListCopy = this.orderList;
					}
				});
			}
		},
		onShow() {
			this.pageNo = 1
			this.getList({
				pageSize: this.pageSize,
				pageNo: this.pageNo
			});
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-picker-container .uni-date-select {
		z-index: 999999999;
	}

	::v-deep .u-transition .u-slide-left-enter-to .u-slide-left-enter-active {
		// z-index: 999999999;
		width: 400rpx;
	}

	.uni-picker-container {
		z-index: 999999999;
	}

	::v-deep .select-input {
		// color: #fe3430;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 96rpx;
		line-height: 96rpx;
	}

	.date {
		width: 100%;
		display: flex;
		align-items: center;

		.date-text {
			padding: 0 24rpx;
			text-align: center;

			.select-input {
				background: #000;
			}
		}

		picker {
			flex: 1;
		}
	}

	page {
		background: #f1f1f1;
		height: 100vh;
	}

	.order {
		background-color: #f1f1f1;
		padding: 26rpx;

		.toast {
			padding: 16rpx 49rpx;
			border-radius: 29rpx;

			.btn {
				display: flex;
				justify-content: space-around;
				padding: 30rpx 0;

				button {
					width: 303rpx;
					height: 97rpx;
					// background: rgba(254, 52, 48, 0);
					border: 3rpx solid #272727;
					border-radius: 49rpx;
					line-height: 97rpx;
					text-align: center;
					margin: auto;
				}
			}

			.form {
				border-bottom: 1px solid #f1f1f1;
				padding: 0 0 30rpx 0;

				.select {
					// display: flex;
					justify-content: space-between;
					align-items: center;

					.text {
						margin: 20rpx 0;
						color: #bdbdbd;
						margin-right: 20rpx;

						text {
							color: #fe3430;
						}
					}

					input,
					picker,
					.select-input {
						flex: 1;
						text-indent: 1em;
						height: 94rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
					}

					.input {
						display: flex;
						align-items: center;
						justify-content: space-between;

						input {
							width: 271rpx;
						}

						text {
							text-align: left;
							margin: 0 20rpx;
						}
					}
				}
			}
		}

		.header_btn {
			display: flex;
			justify-content: space-around;

			button {
				height: 88rpx;
				line-height: 88rpx;
				background: #fe3430;
				border-radius: 49rpx;
				color: #fff;
				margin-left: 0;
				margin-right: 10rpx;
				width: 200rpx;
				font-size: 34rpx
			}
		}

		.order_list {
			.order_list_item {
				position: relative;
				padding: 28rpx 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				border-radius: 20rpx;
				margin-top: 20rpx;

				.order_list_item_left {
					width: 92%;
					color: #bdbdbd;

					.order_list_item_left_top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 24rpx;

						.order_list_item_left_top_l {
							// font-size: 0.9375rem;
							font-weight: 600;
							color: #000;
						}
					}

					.order_list_item_left_buttom {
						text {
							margin-right: 20rpx;
						}
					}
				}

				.order_list_item_right {
					position: relative;

					image {
						width: 12rpx;
						height: 24rpx;
					}

					.zuofei {
						z-index: 1;
						width: 150rpx;
						height: 150rpx;
						position: absolute;
						margin-top: -60rpx;
						margin-left: -200rpx;
					}
				}
			}
		}
	}

	.seacchBtn {
		height: 88rpx;
		line-height: 88rpx;
		background: #fe3430;
		border-radius: 49rpx;
		color: #fff;
		margin-left: 20rpx;
		margin-right: 10rpx;
		width: 200rpx;
		font-size: 34rpx;
		text-align: center;
	}
</style>